<div style="padding-left: 20px">
    <div id="jqxWidget" style="position: relative;">
        <div id="jqxgrid"></div>

    </div>
</div>
<script>
    $(document).ready(function () {
        scMailFRM.init();
    });
    var scMailFRM = (function () {
        //Adding event listeners

        function _addEventListeners() {
            
        };
        //Creating all page elements which are jqxWidgets
        function _createElements() {
            var theme=scMailFRM.config.theme;
            
        };
        //Creating the demo window
        function _createWindow() {
            var theme=scMailFRM.config.theme;
            
        };
        function _getsource(){
            var source ={
                datatype: "json",
                datafields: [
                    { name: '_Email_', type: 'string'},
                    { name: '_Type_',type:'string'},
                    { name: '_Insert_',type:'date'},
                    { name: '_Delete_',type:'date'},
                    { name: '_id_',type:'int'}

                ],
                url: '{{base_url()}}admin-planners/scmail/jqgrid_data/',
                filter: function(){
                    $("#jqxgrid").jqxGrid('updatebounddata');
                },
                sort: function(){
                    // update the grid and send a request to the server.
                    $("#jqxgrid").jqxGrid('updatebounddata');
                },
                root: 'Rows',
                beforeprocessing: function(data){		
                    source.totalrecords = data[0].TotalRows;					
                }
            };	

            var dataadapter = new $.jqx.dataAdapter(source, {
                loadError: function(xhr, status, error)
                {
                    $('#window-error').jqxWindow('setContent',"<b>Status</b>:"+xhr.status+"<br/><b>ThrownError</b>:"+error+"<br/>");
                    $('#window-error').jqxWindow('open');
                }
            }
        );
            return dataadapter;
        }
        var linkrenderer = function (row, column, value) {
            var str="<span style='margin: 4px; float: left;'>";
            try{
                value = $.parseJSON(value);
                if(value._Delete_!=null){
                    str+="\
                        <div onclick=\"scMailFRM.restoreRow('"+value._id_+"');\" \
                        class='icon16 restore_icon hover50' title='Restore'></div>\
                    ";
                }else{ 
                    if(value._Lock_==null){
                        str+="\
                            <div onclick=\"scMailFRM.deleteRow('"+value._id_+"');\" \
                            class='icon16 delete_icon hover50' title='Delete'></div>\
                        ";
                        
                    }
                }
            }catch(e){}
            str+="</span>";
            return str;
        }
        var groupderer = function (row, column, value) {
            var str="<span class='showandhide' style='margin: 4px; float: left;'>";
            try{
                value = $.parseJSON(value);
                if(value=="-1"){
                    str+="";
                }else if(value=="0"){
                    str+="Tiềm năng";
                   
                }else if(value=="1"){
                    str+="Tiềm năng I";
                   
                }else if(value=="2"){
                    str+="Tiềm năng II";
                   
                }else if(value=="3"){
                    str+="Tiềm năng III";
                   
                }
            }catch(e){}
            str+="</span>";
            return str;
        }
        //create jqgrid
        function _createGrid() {
            var theme=scMailFRM.config.theme;
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {	
                width:'920px',
                source: _getsource(),//dataadapter,
                theme: theme,
                pageable: true,
                pagesize: 20,
                pagesizeoptions: ['20', '50', '100'],
                autoheight: true,
                virtualmode: true,
                ready: function () {
                },
                rendergridrows: function(obj)
                {
                    return obj.data;    
                },
                columns: [
                    { text: ''    , datafield: '_id_' ,minwidth:60 ,cellsrenderer: linkrenderer},
                    { text: 'Email'  , datafield: '_Email_'   },
                    { text: 'Nhóm'    , datafield: '_Type_' ,cellsrenderer: groupderer},
                    { text: 'Thêm'      , datafield: '_Insert_' ,width:100 ,cellsalign: 'right',cellsformat: 'yyyy-MM-dd'},
                    { text: 'Xóa'      , datafield: '_Delete_' ,width:100 ,cellsalign: 'right',cellsformat: 'yyyy-MM-dd'}
                        
                ]
            });

        };
        return {
            config: {
                dragArea: null,
                theme: 'classic'
            },
            setting: function () {
                
            },
            init: function () {
                //Creating all jqxWindgets except the window
                _createElements();
                _createWindow();
                //Adding jqxGrid
                _createGrid();
                //Attaching event listeners
                _addEventListeners();
            },
            deleteRow:function (id){
                deletemail(id);
            },
            restoreRow:function (id){
                restoremail(id);
            }
        };
    } ());
    function deletemail(id){
    
        var url=base_url+"admin-planners/scmail/delete";
        var data={
            id          :   id
        };
        jqxAjax(url,data,function(code){
            if(code==1){
                $('#jqxgrid').jqxGrid('updatebounddata');
            }
        });
    }
    function restoremail(id){
        var url=base_url+"admin-planners/scmail/restore";
        var data={
            id          :   id
        };
        jqxAjax(url,data,function(code){
            if(code==1){
                $('#jqxgrid').jqxGrid('updatebounddata');
            }
        });
    }
</script>